<template>
  <div>
    <ul>
      <li v-for="(item,index) in nav" :key="index" @click="handle(index)"  :class = "cur == index ? 'act': ''">
          <a :href="item.url">
          {{ item.name }}
        </a>
      </li>
      <li v-for="(item,index) in nav" :key="index" @click="cck(index)"  :class="{act:isOK[index]}">
          <a :href="item.url">
          {{ item.name }}
        </a>
      </li>
    </ul>
  </div>
</template>
<script>
export default{
  data(){
    return{
        cur:0,//记录点击第几个
      nav:[{
        name:'首页',
        url:'#'
      },{
        name:'关于我们',
        url:'#'
      },{
        name:'加入我们',
        url:'#'
      }],
      isOK:[false,false,false]
    }
  },
  methods:{
   cck(index) {
  // 先将所有项设为false
  this.isOK = this.isOK.map(() => false);
  // 再将当前项设为true
  this.isOK[index] = true;
},
handle(index){
  this.cur = index
}
  }
}
</script>

<style scoped>
li{
  list-style: none;
  line-height: 50px;
  padding:  0 10px;
}
ul{
  display: flex;
}
.act{
  background-color: red;
}
</style>